﻿@import "../../styles/mixins/btn";
@import "../../styles/mixins/utils";
@import "../../styles/mixins/vars";

$boder: #dfe8f1 solid 1px;
$boder-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
.input {
    width: 100%;
    input, textarea {
        width: 100%;
        padding: $d1 $d2;
        border: $boder;
        flex-shrink: 1;
        flex-grow: 0;
        transition: $boder-transition;
        box-shadow: inset 1px 1px 3px #f6f6f6;
        &:focus {
            border-width: 1px;
            border-color: #3da6ff;
        }
    }
    input {
        height: $form-item-height;
    }
    textarea {
        resize: none;
    }
    &.has-errors {
      /*  &:after {
            @include iconfont("\e67b");
         }*/
        input,textarea{
            border-bottom:1px $danger solid;
        }
    }
}

.input-with-addons {
    display: inline-flex;
    width: 100%;
    transition: $boder-transition;
    box-shadow: inset 1px 1px 3px #f6f6f6;
    color: #2b2f33;
    background: #fff;
    //border: $boder;
    input {

    }
    .input-addon {
        padding: 0 $d2;
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        flex-grow: 1;
        border: $boder;
        background-color: rgba(239, 244, 246, 0.36);
        &:first-child {
            border-right: none;
        }
        &:last-child {
            border-left: none;
            border-right: $boder;
        }
    }
}
